<template lang="pug">
  .header1-base
    .left
      a.btn(href="javascript:;", @click="goBack()")
        img(:src="backIcon")
    .right
      router-link(:to="{name: 'Home'}", class="btn")
        img(:src="homeIcon")
</template>

<script>
import backIcon from '../assets/icons/back-white.svg'
import homeIcon from '../assets/icons/home-white.svg'
export default {
  name: 'Header1',
  data () {
    return {
      backIcon: backIcon,
      homeIcon: homeIcon
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="sass">
@import '../styles/color.sass';
@import '../styles/reset.sass';
.header1-base
  position: absolute
  z-index: 100
  padding: 10px
  width: 100%
  display: flex
  flex-direction: row
  justify-content: space-between
  align-items: center
  a.btn
    height: 34px
    width: 34px
    display: inline-block
    border-radius: 50%
    background-color: $alpha-black
    color: $white
    text-decoration: none
    text-align: center
    padding: 5px 5px
    img
      height: 24px
      width: 24px
</style>
